<template>
    <div class="content-left">
        <div class="item">
          <div class="title">园区总览</div>
          <div class="content">
            <div class="box1">
              <div class="box1-left">
                <div class="pic1">
                  <div class="num">
                    <p>27</p>
                    <p>厂房（栋）</p>
                  </div>
                </div>
                <div class="pic2">
                  <div class="num">
                    <p>4</p>
                    <p>楼宇（栋）</p>
                  </div>
                </div>
              </div>
              <div class="box1-right" ref="echart1">
              
            </div>
            </div>

            <div class="box2">
              园区占地总面积:28295亩
            </div>
            <div class="box3">
              <div class="title">
                <span>已建面积：20024亩</span>
                <span>在建面积：6256亩</span>
                <span>未建面积：2015亩</span>
              </div>
              <div class="percent">
                <span style="width:65%;"></span>
                <span style="width:25%;"></span>
                <span style="width:15%;"></span>
              </div>
            </div>
            
          </div>
        
        </div>
        <div class="item2">
          <div class="title">管理体系</div>
          <div class="content">
            <div class="box1">
              <div class="left">
                <img src="../assets/images/园区部门@2x.png" alt="">
              </div>
              <div class="right">
                <p>园区部门</p>
                <p><span>12</span>个</p>
              </div>
            
            </div>
            <div class="box1">
              <div class="left">
                <img src="../assets/images/园区派驻部门@2x.png" alt="">
              </div>
              <div class="right">
                <p>园区派驻部门</p>
                <p><span>10</span>个</p>
              </div>
            
            </div>
            <div class="box1">
              <div class="left">
                <img src="../assets/images/园区派驻部门@2x.png" alt="">
              </div>
              <div class="right">
                <p>包保片区数</p>
                <p><span>6</span>个</p>
              </div>
            
            </div>
            <div class="box1">
              <div class="left">
                <img src="../assets/images/园区部门@2x.png" alt="">
              </div>
              <div class="right">
                <div>
                <p>包保人组长数</p>
                <p><span>6</span>个</p>
                </div>
                <div>
                  <p>包保人数</p>
                  <p><span>42</span>个</p>
                </div>
                
              </div>
            
            </div>
            
          </div>
        
        </div>

        <div class="item3">
          <div class="title">基础设施</div>
          <div class="content">
            <div class="box1">
                <span class="box-title">摄像头</span>
                <img src="../assets/images/摄像头@2x.png" alt="">
                <span class="num">357个</span>
            
            </div>
            
            <div class="box1">
                <span class="box-title">灯杆</span>
                <img src="../assets/images/灯杆@2x.png" alt="">
                <span class="num active">79个</span>
            
            </div>
            <div class="box1">
                <span class="box-title">井盖</span>
                <img src="../assets/images/井盖@2x.png" alt="">
                <span class="num active">82个</span>
            
            </div>
            <div class="box1">
                <span class="box-title">传感器</span>
                <img src="../assets/images/传感器-f@2x.png" alt="">
                <span class="num">4个</span>
            
            </div>
            <div class="box1">
                <span class="box-title">消防栓</span>
                <img src="../assets/images/智能消防栓(1)@2x.png" alt="">
                <span class="num active">168个</span>
            
            </div>
            <div class="box1">
                <span class="box-title">消防站</span>
                <img src="../assets/images/消防站2@2x.png" alt="">
                <span class="num">3个</span>
            
            </div>
            <div class="box1">
                <span class="box-title">派出所</span>
                <img src="../assets/images/传感器-f@2x.png" alt="">
                <span class="num">1个</span>
            
            </div>
            <div class="box1">
                <span class="box-title">供水器</span>
                <img src="../assets/images/供水管理_1@2x.png" alt="">
                <span class="num active">65个</span>
            
            </div>
            <div class="box1">
                <span class="box-title">电力设施</span>
                <img src="../assets/images/电力设施@2x.png" alt="">
                <span class="num ">53个</span>
            
            </div>
            
          </div>
        
        </div>
        <!-- <img src="../assets/images/左侧@2x.png" alt=""> -->
      
    
    </div>
</template>
<script>
const echarts = require('echarts');

export default{
    data(){
        return{

        }
    },
    mounted(){
        this.initCharts1()
    },
    methods:{
        initCharts1 () {
        let myChart = echarts.init(this.$refs.echart1);
        // 绘制图表
        var trafficWay = [
            {
                name: '平桥园区',
                value: 23,
            },
            {
                name: '创业园区',
                value: 23,
            },
            {
                name: '产业园区',
                value: 115,
            },
            {
                name: '其他',
                value: 10,
            },
            // {
            //     name: '',
            //     value: 10,
            // },
        ];
        var data = [];
        var color = ['#d84646', '#faedd6', '#6bb136', '#00aea5', '#fdc345'];
        for (var i = 0; i < trafficWay.length; i++) {
            data.push(
                {
                    value: trafficWay[i].value,
                    name: trafficWay[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 8,
                            shadowBlur: 0,
                            borderColor: color[i],
                            // shadowColor: color[i],
                        },
                    },
                },
                {
                    value: 15,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            // color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0,
                        },
                    },
                }
            );
        }
        var seriesOption = [
            {
                type: 'pie',
                clockWise: false,
                radius: ['55%', '55%'],
                center:['50%','50%'],
                hoverAnimation: false,
                
                minAngle: 20,//最小角度
                // startAngle:270, //起始角度
                label: {
                            show: true,
                            position: 'outside',
                            avoidLabelOverlap: true,
                            color:'#D6E1FF',
                            // alignTo: 'edge',
                            // minMargin: 2,
                            // edgeDistance: 0,
                            fontSize: 8,
                            // margin:0,
                            formatter: function (params) {
                                if (params.name !== '') {
                                    return '{a|' + params.name + '}' + '{b|' + '\n' + params.value + '家' + '}';
                                } else {
                                    return '';
                                }
                            },
                            rich: {
                                a: {
                                    // color: '#ddd',
                                    
                                    fontSize: 8,
                                    
                                },
                                b: {
                                    // color: '#23dbf7',
                                    
                                    fontSize: 10,
                                    
                                },
                            },
                        },
                        labelLine:{  
                          show:false,
                          normal:{  
                              show:false,
                              length: 2
                          }  
                        }, 
                // itemStyle: {
                  
                //     normal: {
                        
                //         labelLine: {
                //             show: true,
                //             normal: {
                //                 length: 0,
                //                 length2: 0,
                //                 lineStyle: {
                //                     color: 'transparent',
                //                 },
                //             },
                //         },
                //     },
                // },
                data: data,
            },
            {
                type: 'pie',
                color: '#69c1f1',
                clockWise: false,
                radius: ['45%', '46%'],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        label: { show: false },
                    },
                },
                data: [100],
            },
        ];
        var option = {
            color: color,
            title: [
                  {
                    text: "{name|" + '161' + "}\n{val|  " +'企业（家）' + "}",
                    top: "center",
                    left: "center",
                    textStyle: {
                      rich: {
                        name: {
                          fontSize: 12,
                          fontWeight:'bold',
                          color: "#2abdff",
                          align: 'center',
                        },
                        val: {
                          fontSize: 8,
                          align: 'center',
                          color: "#fff",
                          left:3,
                        },
                      },
                    },
                  },
                  
                ],
            
            tooltip: {
                show: false,
            },
            toolbox: {
                show: false,
            },
            series: seriesOption,
        };
        myChart.setOption(option)
      },
    }
}
</script>
<style  scoped lang="scss">
.content-left{
    position: relative;
    float: left;
    margin-top: -100px ;
    .item{
      .title{
        font-size: 20px;
        color: #00ffc2;
        font-weight: bold;
      }
      .content{
        width: 430px;
        height: 270px;
        background: url("../assets/images/背景@2x.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 15px;
        
        .box1{
          display: flex;
          .box1-left{
            div{
              width: 170px;
              height: 60px;
              
            }
           .pic1{
              background: url('../assets/images/厂房（栋）@2x.png');
              background-size: 100% 100%;
            }
            .pic2{
              background: url('../assets/images/楼宇（栋）@2x.png');
              background-size: 100% 100%;
            }
            .num{
              height: 100%;
              display: flex;
              padding-left: 20px;
              text-align: center;
              // margin-left: 60px;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              
              p:first-child{
                font-size: 18px;
                font-weight: bold;
                color:#2abdff;
              }
              p:last-child{
                font-size: 12px;
                font-weight: bold;
                color:#fff;
              }
            }
          }
          .box1-right{
            width: 220px;
            height: 120px;
          }
        }
        .box2{
          width: 100%;
          height: 40px;
          background: url('../assets/images/组18灰大素材@2x.png');
          background-size: 100% 100%;
          
          color:#fff;
          font-size: 18px;
          margin-top: 10px;
          text-align: left;
          line-height: 40px;
          padding-left: 5px;
          
        }

        .box3{
          .title{
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            span:nth-child(1){
              color: #0ea368;
            }
            span:nth-child(2){
              color: #d9865c;
            }
            span:nth-child(3){
              color: #86898e;
            }
          }
          .percent{
            width: 100%;
            height:30px;
            background:url('../assets/images/组292@2x.png');
            background-size: 100% 100%;
            margin-top: 15px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0px 8px;
            span{
              display: inline-block;
              height: 8px;
            }
            span:nth-child(1){
              background: #0ea664;
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
            }
            span:nth-child(2){
              background: #d95f0e;
            }
            span:nth-child(3){
              background: #848383;
              
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }
          }
        }

      }
    }
    .item2{
      .title{
        font-size: 20px;
        color: #00ffc2;
        font-weight: bold;
      }
      .content{
        width: 430px;
        height: 260px;
        background: url("../assets/images/背景@2x.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 30px;
        .box1{
          width: 45%;
          height: 100px;
          background: rgba($color: #081c54, $alpha: 0.5);
          display:flex;
          justify-content: center;
          align-items: center;
          .left{
            img{
              width: 50px;
              height: 50px;
            }
          }
          .right{
            text-align: left;
            font-size: 12px;
            color:#eff0f3;
            margin-left: 10px;
            p:last-child{
              margin-top: 10px;
            }
            span{
              font-size: 20px;
              
            }
          }
        }
        .box1:last-child{
          .right{
            div:first-child{
              margin-bottom: 8px;
            }
            p:last-child{
              margin-top: 0px;
            }
          }
        }
      }
    }
    .item3{
      .title{
        font-size: 20px;
        color: #00ffc2;
        font-weight: bold;
      }
      .content{
        width: 430px;
        height: 265px;
        background: url("../assets/images/背景@2x.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 15px;
        padding-bottom: 8px;
        .box1{
          width: 31%;
          height: 77px;
          background: rgba($color: #081c54, $alpha: 0.5);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          color:#eff0f3;
          img{
            width: 20px;
            height: 20px;
            margin-top: 7px;
            margin-bottom: 7px;
          }
          .num{
            font-size: 16px;
          }
          .active{
            color:#ff965a;
          }
        }
      }
    }
  }
</style>